const app = new Vue({
  el: '#app',
  data() {
    return {
      cartItems: [
        {
          name: '男士休闲裤夏季新款',
          sku: '颜色：灰色 尺码：L',
          price: 99.00,
          quantity: 1,
          selected: false,
          image: 'images/goods-1.png'
        },
        {
          name: '男士夏季装短袖polo衫',
          sku: '颜色：浅蓝 尺码：M',
          price: 199.00,
          quantity: 1,
          selected: false,
          image: 'images/goods-2.png'
        }
      ]
    };
  },
  computed: {
    totalPrice() {
      return this.cartItems.reduce((total, item) => total + (item.price * item.quantity), 0).toFixed(2);
    },
    selectedCount() {
      return this.cartItems.filter(item => item.selected).length;
    },
    isAllSelected: {
      get() {
        return this.selectedCount === this.cartItems.length;
      },
      set(value) {
        this.cartItems.forEach(item => item.selected = value);
      }
    }
  },
  methods: {
    deleteSelectedItems() {
      this.cartItems = this.cartItems.filter(item =>!item.selected);
    },
    clearCart() {
      this.cartItems = [];
    },
    decreaseQuantity(index) {
      if (this.cartItems[index].quantity > 1) {
        this.cartItems[index].quantity--;
      }
    },
    increaseQuantity(index) {
      if (this.cartItems[index].quantity < 10) {
        this.cartItems[index].quantity++;
      }
    }
  }
});